<template>
	<u-field :label-width="width" :disabled="disabled" :type="type" :required="required" :value="value" @input="onInput" trim :label="label" :placeholder="placeholder" placeholder-style="color:#98A5B3" :input-align="align" :clearable="false" :error-message="errmsg" @blur="$emit('onBlur')" @confirm="$emit('onConfirm')">
		<template #right>
			<slot name="right">
			</slot>
		</template>

	</u-field>
</template>

<script>
	export default {
		props: {
			disabled: Boolean,
			width: {
				type: [String, Number],
				default: '200'
			},
			type: {
				type: String,
				default: 'text'
			},
			label: {
				type: String,
				default: 'label'
			},
			value: {
				type: [Number, String],
				default: ''
			},
			align: {
				type: String,
				default: 'right'
			},
			placeholder: {
				type: String,
				default: '请输入'
			},
			required: {
				type: Boolean,
				default: false
			},
			errorMessage: {
				type: String,
				default: '请输入'
			},
		},
		model: {
			prop: 'value',
			event: 'input'
		},

		computed: {

		},
		watch: {},

		data() {
			return {
				errmsg: ''
			}
		},
		methods: {
			onInput(value) {
				if (this.required) {
					if (value == '') {
						this.errmsg = this.errorMessage
					} else {
						this.errmsg = ''
					}
				}
				this.$emit('input', value);
			}
		}

	}
</script>

<style>
</style>
